<template>
  <div>
    <p class="DetilsTitle"
      >{{ stopwatch.name }} <span>({{ stopwatch.code }})</span></p
    >
    <a-table :columns="columns" :data-source="stopwatch.detail" bordered :pagination="false" size="small" />
  </div>
</template>
<script lang="ts" setup>
  import { getDetailHooks } from '@/hooks/CodeTablesHooks/getStopwatchDetailHooks';
  const columns = [
    {
      title: '码值取值',
      dataIndex: 'encodingValue',
      align: 'center',
      width: '20%',
    },
    {
      title: '码值名称',
      dataIndex: 'encodingName',
      align: 'center',
      width: '30%',
    },
    {
      title: '编码含义',
      dataIndex: 'encodingMeaning',
      align: 'center',
    },
  ];
  const { stopwatch } = getDetailHooks();
</script>

<style lang="less" scoped>
  .ant-modal {
    .ant-modal-content {
      .ant-modal-body {
        .DetilsTitle {
          font-size: 20px;
          font-weight: bold;
          text-align: center;

          span {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
